<script setup>
import {onMounted, ref} from "vue";

let isCollapse = ref(false)
let default_active = ref('1')
const {default_index} = defineProps(['default_index']);


onMounted(() => {
  default_active.value = default_index

})
defineExpose({
  show() {
    isCollapse.value = !isCollapse.value;
  },

})

</script>

<template>
  <div class="NavigationBar_mod" id="nav_mod">
    <el-menu :default-active=default_active
             class="el-menu-vertical-demo"
             :collapse="isCollapse"
             text-color="#fff"
             active-text-color="#e58c43">
      <router-link to="/">
        <el-menu-item index="1">
          <el-icon>
            <House/>
          </el-icon>
          <template #title><span>首页</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/songLibrary">
        <el-menu-item index="2">
          <el-icon>
            <Headset/>
          </el-icon>
          <template #title><span>歌曲库</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/songExamine">
        <el-menu-item index="3">
          <el-icon>
            <Coordinate/>
          </el-icon>
          <template #title><span>歌曲审核</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/singerExamine">
        <el-menu-item index="4">
          <el-icon>
            <Headset/>
          </el-icon>
          <template #title><span>音乐人审核</span></template>
        </el-menu-item>
      </router-link>
    </el-menu>
  </div>
</template>

<style scoped>
/*导航栏展开后的样式*/
/deep/ .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.NavigationBar_mod {
  box-shadow: 5px 0px 6px 0px #545c6473;
}


/*导航栏整体样式*/
#nav_mod >>> .el-menu {
  height: 100%;
  min-height: 834px;
  top: 0;
  background-color: #545c64;
  border: 0;
}

#nav_mod >>> .el-menu-item:hover {
  background-color: #434a50;
}

#nav_mod >>> .el-menu a {
  text-decoration: none;
}
</style>